<template>
  <van-tabbar-item></van-tabbar-item>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="upLoadFrom.phone"
          name="phone"
          label="联系方式"
          placeholder="手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
          v-model="upLoadFrom.size"
          type="size"
          name="size"
          label="库存"
          placeholder="剩余库存"
          :rules="[{ required: true, message: '库存数量' }]"
      />
      <van-field name="uploader" label="上传水果图片">
        <template #input>
          <van-uploader v-model="value" :after-read="afterRead"/>
        </template>
      </van-field>
      <van-field
          v-model="upLoadFrom.type"
          type="size"
          name="size"
          label="水果种类"
          placeholder="水果种类"
          :rules="[{ required: true, message: '水果种类' }]"
      />
      <van-field
          v-model="upLoadFrom.area"
          is-link
          readonly
          name="area"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
            :area-list="areaList"
            @confirm="onConfirm1"
            @cancel="showArea = false"
        />
      </van-popup>
    </van-cell-group>
    <van-field name="switch" label="是否滞销">
      <template #input>
        <van-switch v-model="upLoadFrom.isUnsalable"/>
      </template>
    </van-field>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import {ref} from "vue";
import {areaList} from '@vant/area-data';
import {useRouter} from "vue-router";
import {reactive} from "@vue/reactivity";
import API from "../plugins/axiosInstance.js";
//是否滞销
const showArea = ref(false);
const router = useRouter()
const areaCode = ref(false);
const onConfirm1 = ({selectedOptions}) => {
  showArea.value = false;
  upLoadFrom.area = areaCode.value = selectedOptions.map((item) => item.text).join('/');
  console.log(areaCode.value)
};
const value = ref([]);
const afterRead = (file) => {
  upLoadFrom.image = file
};

const upLoadFrom = reactive({
  size: 0,
  phone: "",
  //所处地区
  area: "",
  //水果种类
  type: "",
  //是否滞销
  isUnsalable: 0,
  image: "",
})
const onSubmit = (values) => {
  //新建一个from表的这样的话想怎么传递就怎么传递了
  let param = new FormData();//创建form对象
  param.append("image", upLoadFrom.image.file);//为创建的form对象增加上传的文件
  let keys = Object.keys(upLoadFrom)
  if (upLoadFrom["isUnsalable"] === true) {
    upLoadFrom["isUnsalable"] = Number(1);
  } else {
    upLoadFrom["isUnsalable"] = Number(0);
  }
  for (let i = 0; i < keys.length; i++) {
    param.append(keys[i], upLoadFrom[keys[i]]);
  }
  API({
    url: '/farmer/addFoods',
    method: 'post',
    data: param,
  }).then((res) => {
    console.log('上传的数据是')
    let code = res.data.code
    alert('上传成功!');
    if (code === 0) {
      router.push({
        path: '/'
      })
    }
  });
};

</script>

<style scoped>

</style>